<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="author" content="">
    <title></title>  <link rel="icon" href="/template/pc1/images/wmh_favicon.ico" type="image/x-icon" />
    <% include("../inc/input_css.html"){}%>
    <style>
        .control-label{
            width: 140px!important;
        }
    </style>

    <%
		var isAdd = false;
		var isEdit = false;
		if(isEmpty(productAttribute.id)){
			isAdd = true;
		}else{
			isEdit = true;
		}
	%>
</head>
<body>
<div class="ibox">
    <div class="ibox-title">
        <div class="pull-left mbx navbar_title">
            <span class="current">商城管理</span>
            <span class="line">/</span>
            <span class="current"><a href="list">属性列表</a></span><span class="line">/</span>
            <%if(isAdd){%>添加商品属性<%}else{%>编辑商品属性<%}%>
        </div>
    </div>
    <div class="ibox-content">
        <div class="wrapper wrapper-content">
            <div class="row">
                <div class="padding-40">
                    <form class="form-horizontal form-validate" method="post" id="form" action="<%if (isAdd){%>save<%}else{%>update<%}%>">
                        <input type="hidden" name="productAttribute.id" value="${productAttribute.id!}" />
                        <input type="hidden" name="productAttribute.uid" value="${productAttribute.uid!}" />
                        <table class="input tabContent">
                            <div class="form-group">
                                <label class="col-sm-2 control-label"><span class="maroon">*</span>所属商品类型</label>
                                <div class="col-sm-3">
                                    <select name="productAttribute.productType_id" id="productTypeId"class="form-control light-input" required>
                                        <%for(list in allProductType){%>
                                            <option value="${list.id}"<%if (list.id == productTypeId! || list.id == productAttribute.productType.id!){%> selected <%}%>>
                                                ${list.name}
                                            </option>
                                        <%}%>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"><span class="maroon">*</span>商品属性名称</label>
                                <div class="col-sm-3">
                                    <input type="text" name="productAttribute.name" value="${productAttribute.name!}" class="form-control light-input" required="true">
                                </div>

                            </div>

                            <div class="form-group" id="productAttributeTypeTr">
                                <label class="col-sm-2 control-label">商品属性类型</label>
                                <div class="col-sm-3">
                                    <select id="productAttributeType" name="attributeType" class="form-control light-input" required>
                                        <%for(list in allAttributeType){%>
                                        <option value="${list}"<%if (isEdit && list == productAttribute.attributeTypeValue!){%> selected <%}%>>
                                        ${i18n("AttributeType."+list)}
                                        </option>
                                        <%}%>
                                    </select>
                                </div>
                            </div>


                            <%if (productAttribute.attributeTypeValue! == "select" || productAttribute.attributeTypeValue! == "checkbox"){%>
                            <%for(list in productAttribute.attributeOptionList){%>
                                <div class="form-group attributeOptionTr" id="attributeOptionTr">
                                    <label class="col-sm-2 control-label"><span class="maroon">*</span>选项内容</label>
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <input type="text" name="attributeOptionList" value="${list!}" class="form-control light-input" required="true">

                                        </div>
                                        <div class="col-sm-1">

                                            <input id="deleteImage" type="button" class="button deleteImage" value="删除" />
                                        </div>
                                    </div>
                                </div>
                                <%}%>
                                <div class="form-group" id="addAndRemoveTr">
                                    <label class="col-sm-2 control-label"></label>
                                    <div class="row">
                                        <div class="col-sm-1">
                                            <input id="addImage" type="button"  class="button hive-btn" value="+"/>
                                        </div>
                                        <div class="col-sm-1">
                                            <input id="removeImage" type="button"  class="button hive-btn" value="-"/>
                                        </div>

                                    </div>
                                </div>

                            <%}else{%>
                            <div class="form-group" id="addAndRemoveTr" style="display: none">
                                <label class="col-sm-2 control-label"></label>
                                <div class="row">
                                    <div class="col-sm-1">
                                        <input id="addImage" type="button"  class="button hive-btn" value="+"/>
                                    </div>
                                    <div class="col-sm-1">
                                        <input id="removeImage" type="button"  class="button hive-btn" value="-"/>
                                    </div>

                                </div>
                            </div>
                            <%}%>


                            <div class="form-group">
                                <label class="col-sm-2 control-label"><span class="maroon">*</span>排序</label>
                                <div class="col-sm-3">
                                    <input type="text" name="productAttribute.orderList"  value="${productAttribute.orderList!50}" class="form-control light-input" required="true">
                                </div>

                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">是否必填</label>
                                <div class="col-sm-3 col-md-3  col-lg-2 ">
                                    <div class="right_cont_r radio i-checks">
                                        <input type="radio" value="true" name="productAttribute.isRequired" <%if (productAttribute.isRequired! == true){%> checked<%}%>><span style="margin-right: 15px;">是</span>
                                        <input type="radio" value="false" name="productAttribute.isRequired" class="right_cont_r_l" <%if (isAdd || productAttribute.isRequired == false){%> checked<%}%>><span>否</span>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">是否启用</label>
                                <div class="col-sm-3 col-md-3  col-lg-2 ">
                                    <div class="right_cont_r radio i-checks">
                                        <input type="radio" value="true" name="productAttribute.isEnabled" <%if (productAttribute.isEnabled! == true){%> checked<%}%>><span style="margin-right: 15px;">是</span>
                                        <input type="radio" value="false" name="productAttribute.isEnabled" class="right_cont_r_l" <%if (isAdd || productAttribute.isEnabled == false){%> checked<%}%>><span>否</span>
                                    </div>
                                </div>
                            </div>

                        </table>
                        <div class="form-group" style="margin-top: 24px">
                            <label class="col-sm-2 control-label "></label>
                            <div class="col-sm-4 col-sm-offset-0">
                                <button class="hive-btn-cancle" id="btn_cancle" type="button" onclick="history.back()">&nbsp;取消&nbsp;</button>
                                <button class="hive-btn hive-btn-primary margin-left-8" type="submit">&nbsp;提交&nbsp;
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>



</body>
<% include("../inc/input_js.html"){}%>

<!-- 自定义js -->
<script src="/res/js/jquery-migrate-1.2.1.js"></script><!--jquery1.9 以上补丁-->
<script type="text/javascript">
    var uploadUrl="/file/uploadfile?shopId=${shopId!}&type=d";
    var browserUrl="/file/browser?shopId=${shopId!}";
</script>
<script src="https://static.9hive.cn/global/vendor/file/file.js"></script>
<script type="text/javascript">
    $(function () {
        $("input.browserButton").browser();
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_flat-blue',
            radioClass: 'iradio_flat-blue',
        });
    })


</script>

<script>
    $().ready(function() {

        var $productAttributeType = $("#productAttributeType");
        var $productAttributeTypeTr = $("#productAttributeTypeTr");
        var $addAndRemoveTr = $("#addAndRemoveTr");

        // 显示选项内容 注：因为下拉框初始化时会触发
        // change事件，所以如果是新增时才执行productAttributeChange
        $productAttributeType.change(function() {
            productAttributeChange();
        })

        // 增加选项内容输入框
        $("#addImage").click( function() {
            addAttributeOptionTr();
        })

        // 减少选项内容输入框
        $("#removeImage").click( function() {
            removeAttributeOptionTr();
        });

        function productAttributeChange() {
            $(".attributeOptionTr").remove();
            if($productAttributeType.val() == "select" || $productAttributeType.val() == "checkbox") {
                addAttributeOptionTr();
                $addAndRemoveTr.show();
            }else{
                $addAndRemoveTr.hide();

            }
        }

        function addAttributeOptionTr() {
        var attributeOptionTrHtml='<div class="form-group attributeOptionTr" id="attributeOptionTr">'
                                        +'<label class="col-sm-2 control-label"><span class="maroon">*</span>选项内容</label>'
                                        +'<div class="row">'
                                            +'<div class="col-sm-3">'
                                                +'<input type="text" name="attributeOptionList" value="" class="form-control light-input" required="true">'
                                            +'</div>'
                                            +'<div class="col-sm-1">'
                                                +'<input id="deleteImage" type="button" class="button deleteImage" value="删除" />'
                                            +'</div>'
                                        +'</div>'
                                    +'</div>';

            if($(".attributeOptionTr").length > 0){
                $(".attributeOptionTr").eq($(".attributeOptionTr").length-1).after(attributeOptionTrHtml);
            } else {
                $productAttributeTypeTr.after(attributeOptionTrHtml);
            }
        }

        //删除选项内容输入框
        function removeAttributeOptionTr() {
            if($(".attributeOptionTr").length > 1) {
                $(".attributeOptionTr:last").remove();
            } else {
                layer.msg("请至少保留一个选项!");
            }
        }
    });
    $(document).on("click",'.deleteImage',function () {
        if($(".attributeOptionTr").length > 1) {
            $(this).parent().parent().parent().remove();
            //$(".attributeOptionTr:last").remove();
        } else {
            layer.msg("请至少保留一个选项!");
        }
    });

    //删除选项内容输入框
    /*function deleteImageBtn(){
        if($(".attributeOptionTr").length > 1) {
            $(this).parent().prev().parent().prev().parent().remove();
            //$(".attributeOptionTr:last").remove();
        } else {
            layer.msg("请至少保留一个选项!");
        }
    }*/

</script>
</html>